<template lang="pug">
  .barrage-container
    ul.barrages-list
      BarrageItem(
      :id='barrage.id',
      :barrage='barrage',
      :delay='config.delay',
      @end='handleAnimationEnd',
      v-for='(barrage, index) in barrages',
      :key='index')
    .barrage-input
      span.barrage-icon
        i.iconfont &#xe6a6;
      .input-wrap
        input(v-model="barrageText", placeholder="来一发弹幕吧", @keyup.enter="sendBarrage")
      .btn-wrap.fr
        span.barrage-btn(@click='sendBarrage') 发送
        span.barrage-btn.barrage-close(@click='closeBarrage') 关闭
</template>


<script>
import BarrageItem from './barrage-item'
import { mapGetters } from 'vuex'
export default {
    name: 'barrage',
    components: {
      BarrageItem
    },
    data() {
      return {
        barrageText: '',
        barrageVisible: false,
        config: {
          delay: 12,
          moveDelay: 3
        },
        barrages: [],
        moveTimer: null,
        barrageLimit: 0
      }
    },
    beforeMount() {
      this.$store.dispatch('fetchBarrageData', this.$route.params.panoId)
    },
    beforeDestroy() {
      if (this.moveTimer) {
        clearTimeout(this.moveTimer)
      }
      this.clearBarrages()
    },
    computed: {
      ...mapGetters(['barrageData', 'userInfo']),
      getBarrageData() {
        if(this.barrageData.length) {
          return this.barrageData
        }
      },
      getBarrageStaus() {
        return this.barrageVisible
      }
    },
    methods: {
      sendBarrage() {
        if(!this.$AUTH.checkLogin()) return

        let panoId = this.$route.params.panoId
        let avatar = this.userInfo ? (this.userInfo.full_avatar || this.userInfo.avatar) : ''
        let nickname = this.userInfo ? this.userInfo.nickname : ''
        let openId = this.userInfo ? this.userInfo.wx_openid : ''

        if(!this.barrageText) {
          this.$vgo.tip('随便写些什么吧', 'warning')
          return
        }

        let opts = {
          panoId: panoId,
          content: this.barrageText,
          avatar: avatar,
          nickname: nickname,
          openid: openId
        }
        this.$store.dispatch('addBarrage', opts)
        this.barrageText = ''
        // weix高版本输入后没有收起键盘问题
        setTimeout(function() {
          window.scrollTo(0, 0)
        }, 100)
      },
      closeBarrage() {
        // this.$parent.isShowBarrage = false
        this.$store.dispatch('toggleBarrage')
      },
      showBarrage() {
        this.barrageVisible = true
      },
      // 时间转换
      transferDate(timestamp) {
        return new Date(timestamp).toLocaleString()
      },
      // 计算随机数
      randomPer(pre = 3) {
        const rnd = seed => {
            seed = (seed * 9301 + 49297) % 233280
            return seed / (233280.0)
        }
        const rand = number => {
            const seed = new Date().getTime()
            return rnd(seed) * number + Math.random()
        }
        return rand(pre)
      },
      // 清空动画队列
      clearBarrages() {
        this.barrages = []
      },
      handleAnimationEnd(id) {
        const targetIndex = this.barrages.findIndex(barrage => barrage.id === id)
        if (targetIndex > -1) {
          this.barrages.splice(targetIndex, 1)
        }
      },
      queueBarrage(barrages) {
        barrages.forEach((b, i) => {
          b.id = i + 1
        })
        // 生成随机的时间，push 进不同的内容，而不是一次性赋值
        const moveBarrages = () => {
          if (barrages.length) {
            this.barrages.push(barrages[0])
            barrages.splice(0, 1)
            if (barrages.length) {
              this.moveTimer = setTimeout(moveBarrages, parseInt(this.randomPer(this.config.moveDelay), 0) * 800)
            }
          }
        }
        moveBarrages()
        this.barrageLimit = barrages.length + 2
      },
      formatBarrageData(data) {
        if(data) {
          let list = []
          data.forEach(item => {
            list.push(item)
          })
          this.queueBarrage(list)
        }
      }
    },
    watch: {
      barrageData(data) {
        this.formatBarrageData(data)
      },
      deep: true,
      immediate: true
    }
  }
</script>

<style lang="stylus">
.barrage-container
  position: absolute
  width: 100%
  top: 20px
  bottom: 0
  .barrages-list
    position: absolute
    width: 100%
    top: 0
    bottom: 40px
    overflow: hidden
  .barrage-icon
    position: absolute
    left: 0
    top: 0
    width: 40px
    height: 36px
    line-height: 36px
    text-align: center
    i
      font-size: 20px
  .barrage-input
    position: absolute
    padding-left: 40px
    background-color: #E5E9F2
    z-index: 1000
    .input-wrap
      input
        padding: 8px
        border: 0
        font-size: 12px
        height: 16px
    .btn-wrap
      .barrage-btn
        position: relative
        top: 0
        font-size: 12px
        line-height: 36px
        background-color: #E5E9F2
        color: #324057
        cursor: pointer
        text-align: center
      .barrage-close
        color: #fff
        background-color: #FF4949

 .size-0
    font-size: 16px
    fontweight: bolder

  .size-1
    font-size: 14px

  .size-2
    font-size: 12px

  // 字体颜色
  .color-0
    color: chartreuse

  .color-1
    color: green

  .color-2
    color: red

  .color-3
    color: darkviolet

  .color-4
    color: pink

  .color-5
    color: yellow

  .color-6
    color: white

  .color-7
    color: black

@keyframes barrage-in {
  0%  { transform: translate3d(0, -100%, 0) }
  25%, 50%, 75%, 100% { transform: translate3d(0, 0, 0) }
  37%  { transform: translate3d(0, -24%, 0) }
  62% { transform: translate3d(0, -12%, 0) }
  88% { transform: translate3d(0, -5%, 0) }
}

@keyframes barrage-out {
  0%  { transform: translate3d(0, 0, 0) }
  100%  { transform: translate3d(0, -100%, 0) }
}

@keyframes input-box-in {
  0%  { transform: translate3d(0, -2000%, 0) }
  65%  { transform: translate3d(0, 100%, 0) }
  80%  { transform: translate3d(0, -80%, 0) }
  100%  { transform: translate3d(0, 0, 0) }
}

@keyframes inputColor {
  0%  { color: chartreuse }
  12% { color: green }
  24% { color: red }
  36% { color: darkviolet }
  60% { color: pink }
  72% { color: yellow }
  86% { color: white }
  100% { color: black }
}
</style>
